<template>
    <div>
        <el-card style="border: 0px" shadow="never">
            <template slot="header">
                <el-input style="margin-right: 10px;width: 220px" v-model="params.name" placeholder="按角色名称查询" :maxlength="5" show-word-limit></el-input>
                <el-button type="primary" icon="el-icon-plus" plain @click="openRoleWindow('systemRoleChild',null)">新增角色</el-button>
            </template>
           <el-table :data="roleList" v-loading="loading" size="mini" :height="500" row-key="id" stripe :header-cell-style="{fontSize:'15px'}">
                <el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
                <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
                <el-table-column prop="description" label="角色描述" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">

                        <el-popover placement="right" width="600" trigger="click">
                            <el-table :data="permissions" size="mini">
                                <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
                                <el-table-column  property="name" label="权限名称" align="center"></el-table-column>
                                <el-table-column prop="code" label="权限编码" align="center"></el-table-column>
                                <el-table-column prop="type" label="权限类型" align="center">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.type == '1' ? 'success' : (scope.row.type == '2' ? 'warning' : 'danger')" style="width: 100%;height: 100%;">
                                            {{scope.row.type == '1' ? '菜单级权限' : (scope.row.type == '2' ? '按钮级权限' : 'API级权限')}}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-button size="mini"  slot="reference" style="margin-right: 10px" icon="el-icon-view" type="info"  plain @click="showPermissions(scope.row)">权限</el-button>
                        </el-popover>


                        <el-button size="mini" icon="el-icon-edit" type="primary"  plain @click="openRoleWindow('systemRoleChild',scope.row)">修改</el-button>
                        <el-button size="mini" icon="el-icon-close" type="danger" plain @click="removeRole(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    layout="total,prev,pager,next"
                    :total="params.total"
                    :page-size="params.size"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
            ></el-pagination>
        </el-card>
        <system-role-child ref="systemRoleChild"></system-role-child>
    </div>
</template>

<script>

    import { getRoleList,removeRole } from '@/api/system/access/role'

    import { getPermissionsByRoleId } from '@/api/system/access/permission'

    export default {
        name: "system-role-index",
        components:{
          SystemRoleChild:()=>import("@/views/system/access-manager/system-role-child.vue")
        },
        data(){
            return {
                loading:true,
                roleList:[],
                permissions:[],
                params:{page:1,size:10,total:0}
            }
        },
        watch:{
          'params.name'(data){
              this.params.name = data;
              this.getRoleList(this.params);
          }
        },
        methods:{
            handleSizeChange(size){
                this.params.size = size;
                this.getRoleList(this.params);
            },
            handlePageChange(page){
                this.params.page = page;
                this.getRoleList(this.params);
            },
            getRoleList(data){
                getRoleList(data).then(res=>{
                    this.params.total = res.data.data.total;
                    this.roleList = res.data.data.rows;
                    this.loading = false;
                });
            },
            openRoleWindow(name,data){
                if(data == null) this.$refs[name].data = {};
                else this.$refs[name].data = data;
                this.$refs[name].value = true;
            },
            removeRole(row){
                this.$confirm("确定要删除吗?","警告",{type:'warning'}).then(()=>{
                    removeRole({id:row.id}).then(res=>{
                        this.getRoleList(this.params);
                    });
                });
            },
            showPermissions(row){
                getPermissionsByRoleId(row).then(res=>{
                    this.permissions = res.data.data;
                })
            }
        },
        created(){
            this.getRoleList(this.params);
        }
    }
</script>

<style scoped>

</style>